<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>宣臻官网</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
</head>
<body>
	<div class="xz">
		<div class="nav-fix">
			<div class="home-wrap">
				<div class="sub-wrap">
					<div class="sub-container">
						<img src="img/logo.png" alt="logo" class="left">
						<div class="sub-list " >
							<ul>
								<li class="cursor"><a href="index.html">首页</a></li>
								<li class="cursor"><a href="introduction.html">公司简介</a></li>
								<li class="cursor selected b-hover">
									业务介绍
									<span></span>
									<div class="three-bar">
										<ul>
											<li><a href="internet.html">互联网+</a></li>
											<li><a href="network.html">网络整合</a></li>
											<li><a href="event.html">活动传播</a></li>
										</ul>
									</div>
								</li>
								<li class="cursor"><a href="caseShow.html">案例展示</a></li>
								<li class="cursor"><a href="join.html">加入我们</a></li>
							</ul>
						</div>
						<div class="s-nav"></div>
					</div>
				</div>
				<div class="nav-list">
					<ul>
						<li><a href="index.html">首页</a><span></span></li>
						<li><a href="introduction.html">公司简介</a></li>
						<li class="nav-third">
							<div>
								<div class="nav-t-name">业务介绍</div>
								<div class="nav-w">
									<a href="internet.html">互联网+</a>
									<a href="network.html">网络整合</a>
									<a href="event.html">活动传播</a>
								</div>
								
							</div>
						</li>
						<li ><a href="caseShow.html">案例展示</a></li>
						<li ><a href="join.html">加入我们</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="banner-top"></div>
		<div class="event-bg banner">
			<div class="about-title">
				<span>[</span>
				<div class="about-title-content">
					<div>Event Communication</div>
					<div>活动传播</div>
				</div>
				<span>]</span>
			</div>
		</div>
		<div class="about-text intro-text">
			我们拥有各类年会、行业大会、赛事、活动等策划及执行经验。从公关创意到媒介传播，从策划管理到活动执行，我们始终致力于利用最好的资源、用心的服务，刻画品牌形象，使策划不再是虚无的纸上谈兵，赋予活动真正意义，给予企业鲜活且深入人心的品牌形象。
		</div>
		<div class="process ">
			<div class="container">
				<div class="title">
					<div class="title-line"></div>
					<div class="title-name our">业务流程</div>
					<div class="title-line"></div>
				</div>
				<div class="svg-wrap inter-svg-wrap">
					<div class="internet-svg inter-svg-s">
						<svg id="service" viewBox="0,0,1163,600" class="service-svg">
							<g>
								<image xlink:href="img/process/1.png" x="380" y="142" height="19px" width="134px"></image>
								<image xlink:href="img/process/2.png" x="610" y="142" height="19px" width="175px"></image>
								<image xlink:href="img/process/3.png" x="910" y="142" height="188px" width="132px"></image>
								<image xlink:href="img/process/4.png" x="670" y="315" height="19px" width="105px"></image>
								<image xlink:href="img/process/5.png" x="360" y="315" height="19px" width="152px"></image>
								<image xlink:href="img/process/6.png" x="160" y="315" height="200" width="218px"></image>
							</g>
							<path d="M520 151L380 151" stroke="#fff" fill="none" stroke-width="19" class="event-line1"></path>
							<path d="M785 151L600 151" stroke="#fff" fill="none" stroke-width="19" class="event-line2"></path>
							<path d="M910 320L980 320A65 65 0 1 0 930 145L910 145" stroke="#fff" fill="none" stroke-width="19" class="event-line3"></path>
							<path d="M670 323L785 323" stroke="#fff" fill="none" stroke-width="19" class="event-line4"></path>
							<path d="M360 323L515 323" stroke="#fff" fill="none" stroke-width="19" class="event-line5"></path>
							<path d="M310 505L210 505A50 50 0 0 1 310 320" stroke="#fff" fill="none" stroke-width="19" class="event-line6"></path>
							<image xlink:href="img/process/33.png" x="0" y="0" height="646px" width="1250px"></image>
							<g class="hexagon event-1">
								<image xlink:href="img/process/44.png" x="260" y="50" height="79px" width="79px"></image>
								<text x="246" y="164" fill="#000">需求了解</text>
								<text x="283" y="102" fill="#fff">01</text>
							</g>
							<g class="hexagon event-2">
								<image xlink:href="img/process/44.png" x="530" y="50" height="79px" width="79px"></image>
								<text x="542" y="164" fill="#000">签约</text>
								<text x="553" y="102" fill="#fff">02</text>
							</g>
							<g class="hexagon event-3">
								<image xlink:href="img/process/44.png" x="800" y="50" height="79px" width="79px"></image>
								<text x="790" y="164" fill="#000">流程确认</text>
								<text x="823" y="102" fill="#fff">03</text>
							</g>
							<g class="hexagon event-4">
								<image xlink:href="img/process/44.png" x="800" y="220" height="79px" width="79px"></image>
								<text x="790" y="334" fill="#000">方案制定</text>
								<text x="823" y="270" fill="#fff">04</text>
							</g>
							<g class="hexagon event-5">
								<image xlink:href="img/process/44.png" x="530" y="220" height="79px" width="79px"></image>
								<text x="520" y="334" fill="#000">媒介传播</text>
								<text x="553" y="270" fill="#fff">05</text>
							</g>
							<g class="hexagon event-6">
								<image xlink:href="img/process/44.png" x="260" y="220" height="79px" width="79px"></image>
								<text x="246" y="334" fill="#000">现场执行</text>
								<text x="283" y="270" fill="#fff">06</text>
							</g>
							<g class="hexagon event-7">
								<image xlink:href="img/process/44.png" x="310" y="400" height="79px" width="79px"></image>
								<text x="300" y="524" fill="#000">后期总结</text>
								<text x="333" y="455" fill="#fff">07</text>
							</g>
						</svg>
					</div>
				</div>
			</div>

		</div>
		<div class="our-advantage">
			<div class="container advantage-wrap network-wrap">
				<div class="ye-wrapper">
			        <div>
		            	<div class="ye-icon">
		            		<img src="img/ye/bi.png">
		            	</div>
		            	<div class="ye-title ye-title-chuang">让创意不再是单纯的纸上谈兵</div>
		            	<div class="ye-line"></div>
		            	<div class="ye-content">
		            		根据客户需求及活动目的，制定出符合活动需求的策划方案。我们追求让活动顺利执行的同时，更追求将每一个创意元素发挥到极致
		            	</div>
		            </div>
		            <div>
		            	<div class="ye-icon">
		            		<img src="img/ye/earth.png">
		            	</div>
		            	<div class="ye-title ye-title-m">让媒介真正用到实处</div>
		            	<div class="ye-line"></div>
		            	<div class="ye-content">
		            		利用99的资源，达到101的宣传效果。通过对企业品牌的了解与定位，精耕细作，使品牌以一个新的优质形象展现在大众面前
		            	</div>
		            </div>
		            <div>
		            	<div class="ye-icon">
		            		<img src="img/ye/run.png">
		            	</div>
		            	<div class="ye-title ye-title-m">让活动变成动词</div>
		            	<div class="ye-line"></div>
		            	<div class="ye-content">
		            		拒绝死板，瓦解老套。使活动不再是单一的名词，而成为动词的存在。给予企业鲜明且深入人心的品牌形象与标签
		            	</div>
		            </div>
				</div>
				<div class="swiper-container event">
			        <div class="swiper-wrapper ">
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/bi.png">
			            	</div>
			            	<div class="ye-title ye-title-chuang">让创意不再是单纯的纸上谈兵</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		根据客户需求及活动目的，制定出符合活动需求的策划方案。我们追求让活动顺利执行的同时，更追求将每一个创意元素发挥到极致
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/earth.png">
			            	</div>
			            	<div class="ye-title">让媒介真正用到实处</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		利用99的资源，达到101的宣传效果。通过对企业品牌的了解与定位，精耕细作，使品牌以一个新的优质形象展现在大众面前
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/run.png">
			            	</div>
			            	<div class="ye-title">让活动变成动词</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		拒绝死板，瓦解老套。使活动不再是单一的名词，而成为动词的存在。给予企业鲜明且深入人心的品牌形象与标签
			            	</div>
			            </div>
			        </div>
			        <div class="swiper-pagination pagination-circle"></div>
			    </div>
			</div>
		</div>
		<div class="back cursor" ></div>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/z.js"></script>
	<script src="js/velocity.min.js"></script>
	<script>
		function IsPC() {
		    var userAgentInfo = navigator.userAgent;
		    var Agents = ["Android", "iPhone",
		                "SymbianOS", "Windows Phone",
		                "iPad", "iPod"];
		    var flag = true;
		    for (var v = 0; v < Agents.length; v++) {
		        if (userAgentInfo.indexOf(Agents[v]) > 0) {
		            flag = false;
		            break;
		        }
		    }
		    return flag;
		}
		var SvgTop = $(".intro-text").offset().top - $(".intro-text").height() - $(".banner-top").height();
		var flag = false;
		if(!IsPC()) {
			setEventSvg();
		}else {
			$(window).scroll(function(){
			 	if( $(window).scrollTop() > SvgTop) {
			 		if(!flag) {
			 			setEventSvg();
			 			flag = true;
			 		}
			 	}
			});
		}
	
		function setEventSvg() {
			$(".event-1").velocity({opacity:1},300,function() {
				$(".event-line1").velocity({strokeDashoffset:140},300,function() {
					$(".event-2").velocity({opacity:1},300,function(){
						$(".event-line2").velocity({strokeDashoffset:180},300,function(){
							$(".event-3").velocity({opacity:1},300,function(){
								$(".event-line3").velocity({strokeDashoffset:380},600,function() {
									$(".event-4").velocity({opacity:1},300,function(){
										$(".event-line4").velocity({strokeDashoffset:130},300,function(){
											$(".event-5").velocity({opacity:1},300,function(){
												$(".event-line5").velocity({strokeDashoffset:160},300,function(){
													$(".event-6").velocity({opacity:1},300,function(){
														$(".event-line6").velocity({strokeDashoffset:360},600,function() {
															$(".event-7").velocity({opacity:1},300)
														})
													})
												})
											})
										})
									})
								})
							})
						})
					})
				})
			})
			
		}
	</script>
</body>
</html>